// 所有react项目都要有
import react, { Component, Fragment } from 'react';
// 虚拟DOM、JSX解析器
import reactDom from 'react-dom';

import propTypes from 'prop-types';

// 引入样式表
import './index.css';

// 组件的运用：组合、嵌套。
class App extends Component {
  render() {
    const { users } = this.props;
    console.log(users);

    return (
      <>
        <h1>用户列表</h1>
        <div style={{ display: 'flex' }}>
          {users.map((user, i) => {
            return <UserInfo name={user.name} old={user.old} key={i} />;
          })}
        </div>
      </>
    );
  }
}

// 属性校验
class UserInfo extends Component {
  // 指定属性的默认值
  static defaultProps = {
    name: '请指定姓名'
  };

  render() {
    return (
      <div style={{ padding: '1px 1em', margin: '0px 1em', flex: 1, border: '1px solid #aaa' }}>
        <p>姓名：{this.props.name}</p>
        <p>年龄：{this.props.old}</p>
      </div>
    );
  }
}

// prop-types可检验的类型：string、number、object、array、boolean、date
UserInfo.propTypes = {
  // propTypes 属于组件的一个属性
  name: propTypes.string, // PropTypes 属于一个对象
  old: propTypes.oneOfType([
    // 既可以是 number 类型 也可以是 string 类型
    propTypes.number,
    propTypes.string
  ]).isRequired
};
// 指定属性为必填项
// 指定属性的类型

const users = [
  { name: '谢金水', old: 22 },
  { name: 'Jack', old: '二十四' },
  { name: 'Elle', old: 24 }
];

reactDom.render(<App users={users} />, document.getElementById('root'));
